<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>雍禾植发1</title>
  <script src="js/jquery.min.js"></script>
  <script src="js/rem.js"></script>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/index.css">
</head>

<body>
  <code>
  JS中filter、find、has的用法

  <!-- https://blog.csdn.net/qq_24917475/article/details/90799365 -->

  1、filter()
  含义：匹配当前的元素集合，删除不符合条件的元素，返回新的集合
  参数：字符串值，包含供匹配当前元素集合的选择器表达式（过滤条件）
  返回：新的集合
  作用于当前元素。
  </code>
  <ul>
    <li class='a'>list item 1</li>
    <li>list item 2</li>
    <li class='a'>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
    <li>list item 6</li>
  </ul>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script>
    $('li').filter('.a').css('background-color', 'red');
  </script>

  <code>
结果：list item 1    list item 3  背景为红色



2、has()
含义：将匹配元素集合缩减为包含特定元素的后代的集合
参数：字符串值，包含匹配元素的选择器表达式（过滤条件）
返回值：新的集合
作用于当前元素的所有子集。
</code>

  <ul>
    <li>list item 1</li>
    <li class="b">list item 2
      <ul>
        <li class="a"><span>list item 2-a</span></li>
        <li>list item 2-b</li>
      </ul>
    </li>
    <li>list item 3</li>
    <li>list item 4</li>
  </ul>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script>
    $('li').has('span').css('background-color', 'red');
    console.log($('li').has('span'))
  </script>
  <code>
结果：list item 2   背景变红
        --- list item 2-a 背景变红
        --- list item 2-b 背景变红
      list item 3
      list item 4


  

      3、find()
含义：获得当前匹配元素集合中每个元素的后代，由选择器进行筛选
参数：字符串值，包含供匹配当前元素集合的选择器表达式（过滤条件）
返回值：当前查找的元素集合
作用于所有子元素
</code>

  <ul class="level-1">
    <li class="item-i">I</li>
    <li class="item-ii">II
      <ul class="level-2">
        <li class="item-a">A</li>
        <li class="item-b">B
          <ul class="level-3">
            <li class="item-1">1</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script>
    $('li.item-ii').find('li').css('background-color', 'red');
  </script>
  结果 。A
  。B
  -- 1
  这三个li 整行标红



  </script>
</body>

</html>